<template>
	<view class="anonymousBox">
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar" >
			<view class="top_view"></view>
		</view>
		<!-- #endif -->
		<view class="headBox me-fx-row-start-c" :style="{'margin-top':barHeight+'px'}">
			<image :src="avatar" mode=""></image>
			<view class="headRight">
				<view class="me-fx-row-start-c">
					<view class="headNick">
						{{title}}
					</view>
					<image src="../../static/img/boy3.png" mode=""></image>
				</view>
				<view class="userInfo">
					<text>{{age}}岁</text>
				</view>
			</view>
		</view>
		<view class="explain">
			<view class="explainTitle">
				填写掌握对方多少信息
			</view>
			<view class="explainConter">
				如果您与对方联系是得知如下信息请务必提供，以便取证，您的权益将受到保护
			</view>
		</view>
		<view class="personalData">
			<view class="personalDataList me-fx-row-start-c">
				<view class="personalNick">
					真实姓名
				</view>
				<input type="text" value="" placeholder="请填写" v-model="inputName"/>
			</view>
			<view class="personalDataList me-fx-row-start-c">
				<view class="personalNick">
					工作单位
				</view>
				<input type="text" value="" placeholder="请填写"  v-model="inputJob"/>
			</view>
			<view class="personalDataList me-fx-row-start-c">
				<view class="personalNick">
					MSN
				</view>
				<input type="text" value="" placeholder="请填写" v-model="inputMSN"/>
			</view>
			<view class="personalDataList me-fx-row-start-c">
				<view class="personalNick">
					QQ
				</view>
				<input type="text" value="" placeholder="请填写"   v-model="inputQQ"/>
			</view>
			<view class="personalDataList me-fx-row-start-c">
				<view class="personalNick">
					EMAL
				</view>
				<input type="text" value="" placeholder="请填写" v-model="inputEMAL"/>
			</view>
			<view class="personalDataList me-fx-row-start-c">
				<view class="personalNick">
					电话
				</view>
				<input type="text" value="" placeholder="请填写" v-model="inputPhone"/>
			</view>
		</view>
		<view class="complaintExplain">
			投诉说明
		</view>
		<view class="fraudContent">
			<view class="height me-fx-row-sb-c" @click="reportShow=true">
				<view class="fraudBox">
					{{selectReport}}
				</view>
				<image src="../../static/img/jiantou.png" mode=""></image>
			</view>
			<view class="textareaBox">
				<textarea value="" placeholder="详细说明举报内容吧" v-model="textareaValue"/>
				</view>
				<!-- <view class="height">
					<input type="text" value="" placeholder="请输入你电话" class="inputPhone" v-model="otherPhone" />
				</view> -->
		</view>
		
		<view class="submitBtn" @click="submitBtn">
				提交
		</view>
		<!-- 弹框 -->
		<view class="Covering" v-if="reportShow">
			<view class="newList">
				<view class="topBox">
					<view class="bottomBorder" @click="reportBtn(index)"  v-for="(item, index) in reportList">
						{{item}}
					</view>
				</view>
				<view class="bottomBox" @click="reportShow=false">
					取消
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
			title:"",
			id:'',
			avatar:'',
			age:'',
			reportList:['骗子','发广告'],
			reportIndex:1,
			reportShow:false,
			selectReport:'骗子',
			inputName:'',
			inputJob:'',
			inputMSN:'',
			inputQQ:'',
			inputEMAL:'',
			inputPhone:'',
			textareaValue:'',
			otherPhone:'',
			barHeight:25
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			if(option.name){
				this.title = option.name
			}
			if(option.avatar){
				this.avatar=option.avatar
			}
			if(option.age){
				this.age=option.age
			}
		},
		created(){
		this.id=uni.getStorageSync('userId')
		this.getSystemStatusBarHeight()
		},
		methods: {
			//获取系统状态栏高度
			getSystemStatusBarHeight: function() {
				// #ifdef APP-PLUS
				var height = plus.navigator.getStatusbarHeight();
				this.barHeight = height;
				// #endif
				// #ifdef H5
				this.barHeight = 0;
				// #endif
			},
		reportBtn(index){
			this.reportIndex=index+1
			this.selectReport = this.reportList[index]
			this.reportShow=false
		},
		submitBtn(){
			let data={
				unmask_id:this.id,
				unmask_type:this.reportIndex,
				real_name:this.inputName,
				work:this.inputJob,
				qq_account:this.inputQQ,
				email:this.inputEMAL,
				mobile: this.inputPhone,   
				unmask_detail_desc:this.textareaValue,
			}
			this.$u.post('/unmask',data).then(res => {
					if (res) {
						uni.navigateTo({
							url:'../commonPage/finish?rink='+res.message
						})
					}
				})
				.catch((res) => {
					console.log(res.message)
				})
		},
		}
	}
</script>

<style>
	.anonymousBox{
		background-color: #F9F6FF;
	}
	.headBox{
		background-color: white;
		padding: 30rpx ;
	}
	.headBox image{
		width:104rpx;
		height:104rpx;
		border-radius:8px;
	}
	.headBox .headRight{
		margin-left: 20rpx;
	}
	.headRight .headNick{
		margin-bottom: 20rpx;
		font-size:32rpx;
		font-weight:bold;
		color:rgba(68,68,68,1);
	}
	.explain{
		/* background-color: #DCDCDC; */
		padding: 20rpx;
	}
	.personalData{
		padding: 20rpx;
		box-sizing: border-box;
		background-color: white;
	}
	.personalData .personalDataList{
		height: 80rpx;
		line-height: 80rpx;
	}
	.personalData .personalDataList:nth-of-type(n+2),
	.fraudContent :nth-of-type(n+2){
		border-top: 1rpx solid #F9F6FF;
		
	}
	.explain .explainTitle{
		font-size:30rpx;
		color:rgba(51,51,51,1);
		margin: 30rpx 0;
	}
		.personalNick{
			width: 20%;
		}
		.complaintExplain{
			background-color: #F9F6FF;
			height: 108rpx;
			line-height: 108rpx;
			padding-left: 28rpx;
		}
		.fraudContent{
			padding: 20rpx;
			background-color: white;
			margin-bottom: 120rpx;
			}
		.fraudContent image{
			width: 40rpx;
			height: 40rpx;
		}
		.textareaBox{
		padding: 20rpx;	
		}
		.height{
			height: 100rpx;
			line-height: 100rpx;
		}
		.submitBtn{
			width:686rpx;
			height:98rpx;
			background:#5C14FF;
			border-radius:49px;
			margin:0 auto 20rpx;
			text-align: center;
			line-height: 98rpx;
			color: white;
			font-size:36rpx;
			color:rgba(255,255,255,1);
		}
		.headRight image{
			width:24rpx;
			height:24rpx;
			/* display: block; */
			margin-left: 10rpx;
		}
		.userInfo text{
			color: #999999;
		}
		.explainConter{
			font-size:28rpx;
			color:rgba(102,102,102,1);
			line-height:40rpx;
		}
		.inputPhone{
			height: 100rpx;
			line-height: 100rpx;
		}
		.newList {
				position: fixed;
				bottom: 4%;
				width: 94%;
				left: 50%;
				transform: translateX(-50%);
			}
		
			.newList view,
				{
				background-color: white;
				text-align: center;
				color: #AA00FF;
			}
		
			.topBox {
				background-color: white;
				border-radius: 10rpx;
				overflow: hidden;
			}
		
			.topBox view {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}
		
			.bottomBorder {
				border-bottom: 1rpx solid #D3D3D3;
			}
		
			.bottomBox {
				background-color: white;
				border-radius: 10rpx;
				margin-top: 50rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}
		
</style>
